<template>
  <div class="app-container">
    <!--操作栏-->
    <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        刷新
      </el-button>
      <div style="display:inline-block;">
        <router-link :to="{path:`/sys/resource/add`}">
          <el-button
            class="filter-item light-primary-btn"
            style="margin-left: 10px;"
            type="primary"
            icon="el-icon-plus"
          >
            新增
          </el-button>
        </router-link>
      </div>
    </div>
    <!--表格主体-->
    <tree-table v-loading="listLoading" :data="data" :columns="columns" border highlight-current-row>
      <el-table-column label="资源代码" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.resourceCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="资源类型" align="center" width="100">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.resourceType ===0 ? 'primary' : 'success'"
            disable-transitions
          >{{ scope.row.resourceType | resourceTypeFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="链接地址" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.url }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排序" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.displayOrder }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <el-button style="margin-left: 10px" type="primary" size="mini" @click="handleUpdate(scope.row)">修改
          </el-button>
          <el-button style="margin-left: 10px" type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </tree-table>
  </div>
</template>

<script>

import treeTable from '@/components/TreeTable'
import { getSysResourceTree, deleteSysResource } from '@/api/sys/resource'
import waves from '@/directive/waves'
import msgUtil from '@/utils/msgUtil'
// import { isPrivilege } from '@/utils/constUtils'
export default {
  name: 'SysResourceTree',
  components: { treeTable },
  directives: { waves },
  filters: {
    resourceTypeFilter(status) {
      const typeMap = {
        0: '模块',
        1: '功能'
      }
      return typeMap[status]
    },
    statusFilter(status) {
      const statusMap = {
        0: '隐藏',
        1: '显示'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      columns: [
        {
          text: '资源名称',
          value: 'resourceName',
          width: 260
        }],
      data: {},
      listLoading: true,
      listLoading1: true
    }
  },
  created() {
    this.getSysResouceTree()
  },
  methods: {
    // isPrivilege(resourceCode) {
    //   return isPrivilege(resourceCode)
    // },
    // 刷新资源树
    handleFilter() {
      this.listLoading = true
      this.getSysResouceTree()
    },
    // 异步加载资源树
    async getSysResouceTree() {
      this.listLoading = true
      await getSysResourceTree({}).then(response => {
        this.data = response.data
        this.listLoading = false
      })
    },
    // 删除
    handleDelete(row) {
      msgUtil.confirm('确认删除资源?').then(() => {
        deleteSysResource({ id: row.id }).then((res) => {
          console.log(res)
          if (this.Const.OK === res.returnCode) {
            msgUtil.success2('删除成功!')
            this.getSysResouceTree()
          } else {
            msgUtil.error2(res.msg)
          }
        })
      })
    },
    // 处理修改
    handleUpdate(row) {
      console.log(row)
      this.$router.push({
        path: '/sys/resource/update',
        query: { id: row.id }
      })
    }
  }
}
</script>

<style scoped>
</style>
